const path = require('path')
const outputPath = path.join(__dirname, 'dist')
const CopyWebpackPlugin = require('copy-webpack-plugin')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');

// const MonacoWebpackPlugin = require('monaco-editor-esm-webpack-plugin');

module.exports = {
    target: 'web',
    mode: 'development',
    entry: {
        index: './src/index.js'
    },
    output: {
        publicPath: outputPath,
        filename: '[name].js',
        path: outputPath
    },
    plugins: [
        new CopyWebpackPlugin({patterns: [{from: 'public', to: outputPath}]}),
        new MonacoWebpackPlugin({
            languages:["javascript"],
            // features:["coreCommands","find"]
        })
    ],
    performance: {
        hints: false
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [['@babel/preset-env', {targets: {chrome: 91}}], '@babel/preset-react'],
                        plugins: [
                            ['@babel/plugin-proposal-decorators', {legacy: true}],
                            '@babel/plugin-proposal-class-properties',
                            ['import', {
                                libraryName: '@material-ui/core',
                                libraryDirectory: 'esm',
                                camel2DashComponentName: false
                            }, 'core'],
                            ['import', {
                                libraryName: '@material-ui/lab',
                                libraryDirectory: 'esm',
                                camel2DashComponentName: false
                            }, 'lab'],
                            ['import', {
                                libraryName: '@material-ui/icons',
                                libraryDirectory: 'esm',
                                camel2DashComponentName: false
                            }, 'icons']
                        ]
                    }
                }
            },

            {
                test: /\.(scss|css)$/,
                use: [
                    {
                        loader: 'style-loader'
                    },
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    }, {
                        loader: 'sass-loader'
                    }
                ]
            }, {
                test: /\.(jpg|jpeg|png|bmp|gif|woff|svg|eot|ttf)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '/img/[name]-[hash:8].[ext]',
                            limit: 10 * 1024 //如果图片小于10k，就使用base64处理，
                        }
                    }
                ]
            }
        ]
    }
}
